<template>
    <div class="withdraw_wrap">
        <!-- <NavBar title="审核提现" :isBack="true" ></NavBar> -->
        <view class="withdraw_list">
            <view class="search" v-if="userInfo.UserType == 3">
                <u-icon name="search" size="22" color="#297AFD"></u-icon>
                <input type="text" v-model="form.userNumber" placeholder="请输入用户id" @change="handleChange">
            </view>
            <u-empty mode="list" v-if="!list.length"> </u-empty>
            <view v-for="item in list" class="item_amount">
                <view class="det_text">
                    <view class="det_left">类型：</view>
                    <view class="det_right">{{ item.Remark }}</view>
                </view>
                <view class="det_text">
                    <view class="det_left">申请时间：</view>
                    <view class="det_right">{{ $timestampToDate(item.CreateTime, 'time') }}</view>
                </view>
                <view class="det_text">
                    <view class="det_left">用户ID：</view>
                    <view class="det_right">{{ item.UserNumber }}</view>
                </view>
                <view class="det_text">
                    <view class="det_left">提现金额：</view>
                    <view class="det_right amount_text">￥{{ item.PayoutAmount }}</view>
                </view>
                <view class="det_text" v-if="item.PayoutStatus == 0 && userInfo.UserType == 3">
                    <view class="det_left">提现方式：</view>
                    <view class="det_right">
                        <u-radio-group v-model="item.flag" placement="row" iconPlacement="left" size="38rpx">
                            <u-radio v-for="(item1, index1) in radiolist" :key="index1" :label="item1.name"
                                :value="item1.value" :name="item1.value">
                            </u-radio>
                        </u-radio-group>
                    </view>
                </view>
                <view class="det_option">
                    <!-- <view class="detail" @click="$gotoUrl('/pages/selfPages/royalty/index?id=' + item.Id)">
                        提现明细
                    </view> -->
                    <view class="text" v-if="item.PayoutStatus == 1">受理中</view>
                    <view class="text" v-else-if="item.PayoutStatus == 2">成功</view>
                    <view class="text" v-else-if="item.PayoutStatus == 3">失败</view>
                    <view class="text" v-else-if="item.PayoutStatus == 4">手动提现</view>
                    <view class="text" v-else-if="item.PayoutStatus == 0 && userInfo.UserType == 1">待提现</view>
                    <view class="btn" v-else-if="item.PayoutStatus == 0 && userInfo.UserType == 3"
                        @click="handleConfirm(item.Id, item.flag)">确认提现</view>

                </view>
            </view>
        </view>
    </div>
</template>
<script>
export default {
    data () {
        return {
            form: {
                userNumber: "",
                PageIndex: 1,
                PageSize: 10
            },
            list: [],
            radiolist: [{
                name: '手动转账',
                value: false,
                disabled: false
            },
            {
                name: '直接转入余额',
                value: true,
                disabled: false
            },
            ]
        }
    },
    computed: {
        userInfo () {
            return this.$store.state.userInfo
        }
    },
    methods: {
        //提现
        handleConfirm (payoutId, flag) {
            uni.showModal({
                title: '提示',
                content: '确定通过提现？',
                success: async (res) => {
                    if (res.confirm) {
                        const res = await this.$http.post(`payout/auditpayout/${payoutId}?flag=${flag}`)
                        if (res.Code == 200) {
                            uni.showToast({ title: "审核成功" })
                            this.form.PageIndex = 1
                            this.list = []
                            getList()
                        }
                    } else if (res.cancel) {
                        console.log('取消');
                    }
                }
            });
        },
        //搜索
        handleChange () {
            this.form.PageIndex = 1;
            this.list = []
            this.getList()
        },
        //获取列表
        async getList () {
            uni.showLoading({ title: "加载中" })
            let res = null
            if (this.userInfo.UserType == 1) {
                res = await this.$http.get('payout/payouts', this.form)
            } else {
                res = await this.$http.get('/payout/userpayouts', this.form)
            }
            res.Data.DataList.forEach(x => x.flag = false)
            this.list = this.list.concat(res.Data.DataList)
            uni.hideLoading();
        }
    },
    onReachBottom () {
        this.form.PageIndex += 1
        this.getList()
        console.log("触底了11")
    },
    created () {
        this.getList()
    }
}
</script>
<style lang="scss" scoped>
.withdraw_list {
    width: 100%;
    height: 100vh;
    padding: 28rpx;
    box-sizing: border-box;
    background: linear-gradient(360deg, #F6F8FC 0%, #F6F8FC 12%, #F2F2F2 100%);
}

.item_amount {
    width: 100%;
    padding: 32rpx 28rpx 46rpx 40rpx;
    box-sizing: border-box;
    /* background: url("../../static/img/amount_bg.png"); */
    margin-bottom: 32rpx;
    background-color: #FFFFFF;
    box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.05);
    border-radius: 22rpx;

    .det_text {
        display: flex;
        align-items: center;

        &:nth-child(1) {
            margin-bottom: 18rpx;
        }

        &:nth-child(2) {
            margin-bottom: 28rpx;
        }

        &:nth-child(3) {
            margin-bottom: 32rpx;
        }

        &:nth-child(4) {
            margin-bottom: 50rpx;
        }

        .det_left {
            width: 140rpx;
            font-weight: bold;
            font-size: 28rpx;
            color: #83889F;
            padding-right: 20rpx;
        }

        .det_right {
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
            flex: 1;

            .u-icon-radio {
                width: 22rpx;
                height: 22rpx;
                background: #0051FF;
                border-radius: 50%;
            }
        }

        .amount_text {
            font-weight: 500;
            font-size: 36rpx;
            color: #0051FF;
        }
    }

    .det_option {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .detail {
            font-family: PingFang SC;
            font-size: 24rpx;
            color: #0051FF;
            margin-right: 36rpx;
        }

        .text {
            font-size: 24rpx;
            color: #0051FF;
        }

        .btn {
            width: 144rpx;
            height: 60rpx;
            background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
            border-radius: 8rpx;
            text-align: center;
            line-height: 60rpx;
            font-family: PingFang SC;
            font-size: 24rpx;
            color: #FFFFFF;
            margin-top: 40rpx;

        }
    }
}

.search {
    width: 694rpx;
    height: 36px;
    background: #FFFFFF;
    box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    margin: auto;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    box-sizing: border-box;
}

.search image {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-right: 4px;
}

.search input {
    width: 100%;
    font-weight: bold;
    font-size: 24rpx;
    color: #000000;
}

.search input::placeholder {
    color: #919191;
}

::v-deep .u-radio-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>